<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>作业</title>
</head>

<body>
    <div id="app">
        <name></name>
        <name></name>

        <!-- </div> -->
        <school title='测试标题' content='测试内容'></school>t
        <!--传入普通字符串-->
        <school title='清华大学' content='最好的大学'></school>
        <!--传入普通字符串-->
        {{schoolName}}
        <!---在app的作用域内都可以输出实例的属性和方法-->
        <!-- <school title='{{schoolName}}'></school>直接赋值不行，需要绑定属性 -->
        <!-- <school :title='schoolName'></school> -->
        <college :obj='obj' :score='score'></college>
        <!--组件中怎么便利属于与对象-->
        <ul >
           <li ></li> 
        </ul>

        <!-- <div style="color:red">请问---{{arr.name}}您好贵庚--------------你说啥我今年{{arr.age}}</div>
        <div style="color:red">请问---{{arr.name}}您好贵庚--------------你说啥我今年{{arr.age}}</div>
        <div style="color:red">请问---{{arr.name}}您好贵庚--------------你说啥我今年{{arr.age}}</div> -->
        <language v-for="(arr,index) in arrs" :arr="arr" :index="index=index+1"></language>

    </div>

</body>
<script>
    //全局组件定义
    Vue.component('name', {//组件也是一个实例，默认只能调用自身的属性和方法
        data: function () {//为什么是函数？如果说对象，变量的指向到对象时，存储的是对象的地址，对象只有一份
            return {
                result: true
            };
        },
        methods: {
            change: function () {
                console.log(this.result)
                this.result = !this.result
            }
        },
        template: '<div><button @click="change">点击</button><div v-if="result">内容</div></div>'

    });//组件的定义？ 可复用的vue实例,实例都是隔离的

    //全局组件定义
    Vue.component('demoName', {//驼峰方式命名要在脚手架中使用
        data: function () {//为什么是函数？如果说对象，变量的指向到对象时，存储的是对象的地址，对象只有一份
            return {
                result: true
            };
        },
        methods: {
            change: function () {
                console.log(this.result)
                this.result = !this.result
            }
        },
        template: '<div><button @click="change">点击</button><div v-if="result">内容</div></div>'

    });//组件的定义？ 可复用的vue实例,实例都是隔离的

    //定一个对象
    let school = {
        data: function () {
            return {
                // title:'标题',   跟props 同名会报错
                // content:'内容'  跟props 同名会报错
            }
        },
        props: ['title','content'],//数组，对外暴露一个变量名
        template: '<div style="color:red">{{title}}{{content}}</div>',
    }

    //定一个对象
    let college = {
        data: function () {
            return {
               
            }
        },
        props: ['obj', 'score'],//数组，对外暴露一个变量名,传入的类型可以有多种，而且可以传入多个值
        template: '<div style="color:red">  {{obj.name}}-----------{{obj.classNum}}-----{{score}}</div>',
    }

    //定一个对象
    let language = {
        props: ['arr','index'],//数组，对外暴露一个变量名
        template: '<div style="color:red">{{index}}  请问---{{arr.name}}您好贵庚--------------你说啥我今年{{arr.age}}</div>',
    }

    //不能使用普通实例中的变量

    new Vue({
        el: "#app",
        data: {
            result: true,
            schoolName: '闽西职业技术学院',
            obj: {
                name: '软件学院',
                classNum: 7
            },
            score: 90,
            arrs: [//vue怎么遍历数组,对象 v-for
                { 'name': 'php', age: 30 },
                { name: 'js', age: 30 },
                { name: 'java', age: 30 },
                { name: 'python', age: 35 }
            ]
        },
        methods: {
            change: function () {
                this.result = !this.result
            }
        },
        components: {
            // 指令，过滤器,定义一个局部的指令，无非就是 components 中定义key = value 格式 value 必须是json格式
            // 而且外层用到的 特殊标签就是key值
            //schools: school,//第一个是key值，第二个是外层的json对象 这种格式可以
            school,//简写方式 school:school 的简写                    这种简写格式也行
            // schoolName:school,//驼峰方式不行还是要在脚手架
            college,
            language
        }
    })
    //又没办法使用普通实例中的变量呢？-----》props

    //作业定义一个局部组件，实现商品遍历，数据在普通实例中
</script>

</html>